<template>
	<view class="boxBg flex_r_sb_c" :class="colorType==='dark'?'tc_1':'tc_w'">
		<view class="lunarTime f_48">{{lunarTime}}</view>
		<view class="DateInfo">
			<view class="solarDate f_24">{{solarDate}}</view>
			<view class="lunarDate f_24">{{lunarDate}}</view>
		</view>
		<view class="shouldInfo flex_c_fe_fe">
			<view class="shouldBe f_38">宜 {{shouldBe}}</view>
			<view class="notShouldBe f_30">忌 {{notShouldBe}}</view>
		</view>
		<view class="arrow" :style="{backgroundColor:colorType === 'dark'?'#f3f3f3':'#111'}" @click.stop="goLunarCalendar">
			<text class="iconfont iconrightArrow f_20 fw_700"></text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"fr-lunar-calendar",
		props: {
			colorType: { // 组件颜色, dark为暗色系, light为浅色系
				type: String,
				default: 'dark'
			},
		},
		data() {
			return {
				lunarTime: '',
				solarDate: '',
				lunarDate: '',
				shouldBe: '',
				notShouldBe: ''
			};
		},
		mounted() {
			this.initTime()
			this.initDate()
			this.$tool.getDate('date') === uni.getStorageSync('moon|lunar').date ? this.setLunarData(uni.getStorageSync('moon|lunar').data) : this.getChineseAlmanac()
		},
		methods: {
			initTime() {
				const _this = this
				_this.lunarTime = _this.$tool.time2Lunar()
				setInterval(function() {
					_this.lunarTime = _this.$tool.time2Lunar()
				}, 10 * 1000)
			},
			initDate() {
				const date = new Date()
				this.solarDate = ('0' + (date.getMonth() + 1)).slice(-2) + '月' + ('0' + (date.getDate())).slice(-2) + "日"
				const lunarObj = this.$date2Lunar.sloarToLunar(date.getFullYear(), date.getMonth() + 1, date.getDate())
				this.lunarDate = lunarObj.lunarMonth + lunarObj.lunarDay
			},
			async getChineseAlmanac() {
				const _this = this
				const today = _this.$tool.getDate('date')
				const key = '98912830a4aa64d32e4bcd460f59592d'
				const url = 'https://v.juhe.cn/laohuangli/d?date=' + today + '&key=' + key
				_this.$api.get({
					url: url,
					// loadingTip: this.refresh ? '获取数据中...' : '',
					data: {},
					success: res => {
						let resCopy = res.result
						resCopy.yiArr = resCopy.yi.split(' ')
						resCopy.jiArr = resCopy.ji.split(' ')
						resCopy.jishenArr = resCopy.jishen.split(' ')
						resCopy.xiongshenArr = resCopy.xiongshen.split(' ')
						const data = {
							date: resCopy.yangli,
							data: resCopy,
						}
						uni.setStorageSync('moon|lunar', data)
						_this.setLunarData(res.result)
					},
					fail: err => {}
				})
			},
			setLunarData(e) {
				const yiArr = e.yi.split(' ')
				const jiArr = e.ji.split(' ')
				this.shouldBe = yiArr.length >= 2 ? yiArr[0] + yiArr[1] : yiArr[0]
				this.notShouldBe = jiArr.length >= 2 ? jiArr[0] + jiArr[1] : jiArr[0]
			},
			goLunarCalendar() {
				this.$tool.go('/pages/func/lunarCalendar/lunarCalendar')
			},
		},
	}
</script>

<style lang="scss" scoped>
.boxBg {
	width: 100%;
	height: 140rpx;
	padding: 24rpx;
	box-sizing: border-box;
	border: 2rpx solid #f3f3f3;
	border-radius: 24rpx;
	.lunarTime {
		margin-right: 24rpx;
	}
	.DateInfo {
		margin-right: 24rpx;
	}
	.shouldInfo {}
	.arrow {
		width: 32rpx;
		height: 32rpx;
		line-height: 24rpx;
		text-align: center;
		border-radius: 32rpx;
		padding-left: 6rpx;
		box-sizing: border-box;
	}
}
</style>
